<template>
  <el-card class="box-card" shadow="never">
    <template #header class="card-header">
      <div class="card-title">
        <span class="name">{{ title }}</span>
      </div>
      <div class="card-right">
        <slot name="right"></slot>
      </div>
    </template>
    <slot></slot>
  </el-card>
</template>
<script>
export default {
  name: 'c-card',
  props: {
    title: {
      type: String,
      default: '',
    },
  },
  setup() {},
}
</script>
<style lang="scss" scoped>
.card-title {
  display: inline-block;
  min-width: 100px;
  .name {
    font-size: 16px;
    font-weight: 900;
    line-height: 20px;
    color: #ccc;
    &::before {
      display: inline-block;
      width: 6px;
      height: 16px;
      margin-right: 4px;
      vertical-align: -2px;
      background: #1b65b9;
      content: '';
    }
  }
}
.card-right {
  float: right;
  margin-top: -5px;
}
</style>
